<template>
  <div>
    <el-row>
      <div class="div-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '' }">&#12288;&#12288;主页</el-breadcrumb-item>
          <el-breadcrumb-item>数据管理</el-breadcrumb-item>
          <el-breadcrumb-item>发布服务</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-row>
    <el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <i class="kfb-icon-list-outline"></i>
          <span>服务列表</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="handleAdd"
            icon="el-icon-circle-plus-outline"
          >服务添加</el-button>
        </div>
        <div class="block">
          <el-table
            :data="this.tableData.filter(data=>data.name.toLowerCase().includes(search.toLowerCase())).slice((currentPage-1)*pageSize,currentPage*pageSize)"
            style="width: 100%"
            ref="utable"
          >
            <el-table-column label="服务ID" prop="_id" show-overflow-tooltip></el-table-column>
            <el-table-column label="服务名称" prop="name" show-overflow-tooltip></el-table-column>
            <el-table-column label="创建时间" :formatter="localDate" show-overflow-tooltip></el-table-column>
            <el-table-column align="right" width="200px" label="操作">
              <template slot="header" slot-scope="scope">
                <el-input v-model="search" size="mini" placeholder="输入关键字搜索"></el-input>
              </template>
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pagination"
            background
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-card>
    </el-row>
    <!--编辑-->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <div>
        <el-form ref="form" :model="form" label-width="120px" label-position="right" :rules="rules">
          <el-form-item label="服务名称" size="small" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="服务资源" size="small" prop="resource">
            <el-input v-model="form.resource" type="textarea" :rows="16"></el-input>
          </el-form-item>

          <!-- <el-form-item label="服务类型" size="small" prop="description">
            <el-select v-model="form.type">
              <el-option :key="0" :value="0" label="点"></el-option>
              <el-option :key="1" :value="1" label="线"></el-option>
              <el-option :key="2" :value="2" label="面"></el-option>
            </el-select>
          </el-form-item>-->
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible= false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleConfirm('form')" size="small">确 定</el-button>
      </span>
    </el-dialog>

    <!--属性-->
    <el-dialog
      title="属性配置"
      :visible.sync="dialogVisible1"
      width="25%"
      height="200"
      :before-close="handleClose"
    >
      <div>
        <json-formatter v-model="form.attribute"></json-formatter>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleAttrConfirm()" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { add, remove, update, list } from "@/api/yxwh/ysfw";
import JsonFormatter from "@/components/Json";
import Clone from "@/utils/clone"; //克隆类
export default {
  name: "index",
  components: { JsonFormatter },
  data() {
    return {
      tableData: [],
      form: {},
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }]
      },
      search: "",
      dialogVisible: false,
      dialogVisible1: false,
      add: undefined,
      index: -1,
      total: 0,
      currentPage: 1,
      pageSize: 10,
      activeName: "first"
    };
  },
  computed: {
    title() {
      return this.add ? "添加" : "修改";
    }
  },
  methods: {
    localDate(v) {
      const d = new Date(v.ct || Date.now());
      d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
      return d.toISOString();
    },
    /**
     * 编辑
     * @param index
     * @param row
     */
    handleEdit(index, row) {
      this.index = this.pageSize * (this.currentPage - 1) + index;
      this.form = Clone.clone(row);
      this.dialogVisible = true;
      this.add = false;
    },
    /**
     * 配置
     * @param index
     * @param row
     */
    handleConfig(index, row) {
      this.index = this.pageSize * (this.currentPage - 1) + index;
      this.form = Clone.clone(row);
      this.dialogVisible1 = true;
    },
    /**
     * 确定配置
     */
    handleAttrConfirm() {
      update({ _id: this.form._id, attribute: this.form.attribute }).then(
        data => {
          this.tableData[this.index].attribute = this.form.attribute;
          this.dialogVisible1 = false;
        }
      );
    },
    /**
     * 删除
     * @param index
     * @param row
     */
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          remove(row).then(res => {
            this.tableData.splice(
              this.pageSize * (this.currentPage - 1) + index,
              1
            );
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    /**
     * 关闭
     * @param done
     */
    handleClose(done) {
      done();
    },

    /**
     * 确定
     * @param formName
     */
    handleConfirm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.add) {
            add(this.form).then(res => {
              this.tableData.push(res.data);
              this.total = this.tableData.length;
              this.dialogVisible = false;
            });
          } else {
            update(this.form).then(res => {
              Clone.copy(this.form, this.tableData[this.index]);
              this.dialogVisible = false;
            });
          }
        } else {
          this.$message.error("数据校验未通过，请重新输入");
          return false;
        }
      });
    },
    /**
     * 添加
     */
    handleAdd() {
      this.dialogVisible = true;
      this.add = true;
      this.form = {
        name: "", //图层名称
        url: "",
        type: "",
        attribute: "", //子节点
        dept: this.$store.getters.dept
      };
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
    },
    /**
     * 选择页数
     * @param size
     */
    handleSizeChange(size) {
      this.pageSize = size;
    },
    /**
     * 翻页
     * @param currentPage
     */
    handlePageChange(currentPage) {
      this.currentPage = currentPage;
    },
    /**
     * 获取页数
     */
    getData() {
      list().then(res => {
        this.tableData = res.data;
        this.total = this.tableData.length;
      });
    },
    /**
     * 格式化
     * @param row
     * @param column
     * @param cellValue
     * @param index
     * @returns {string}
     */
    formatter(row, column, cellValue, index) {
      let value = "";
      switch (parseInt(row.type)) {
        case 0:
          value = "点";
          break;
        case 1:
          value = "线";
          break;
        case 2:
          value = "面";
          break;
      }
      return value;
    }
  },
  mounted: function() {
    this.getData();
  }
};
</script>

<style lang="scss" scoped>
.div-breadcrumb {
  border-radius: 4px;
  min-height: 48px;
  background: #99a9bf;
  display: flex;
  align-items: center;
  font-size: 24px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 10px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.el-dialog__body {
  padding: 0 0;
}
</style>

